<template>
  <div>
    <h3>备案主体信息详情</h3>
    <el-card>
      <div>
        <div class="border-bottom mar-top-12">
          <div class="title border-line f-size-16">
            受益所有人基本信息
            <el-button
              @click="viewText"
              type="text"
              icon="el-icon-view"
              :style="{ color: view ? '#409EFF' : '#ccc', 'font-size': ' 18px' }"
            ></el-button>
          </div>
          <div class="content">
            <div class="item">
              <p class="title">姓名</p>
              <span>{{ baseInfo.name }}</span>
            </div>
            <div class="item">
              <p class="title">性别</p>
              <span>{{ baseInfo.sex }}</span>
            </div>
            <div class="item">
              <p class="title">国籍</p>
              <span>{{ baseInfo.national }}</span>
            </div>
            <div class="item">
              <p class="title">身份证件或身份证明文件类型</p>
              <span>{{ baseInfo.idType }}</span>
            </div>
            <div class="item">
              <p class="title">身份证件或身份证明文件号码</p>
              <span>{{ baseInfo.idCode }}</span>
            </div>
            <div class="item">
              <p class="title">身份证件或身份证明文件有效期限</p>
              <span>{{ baseInfo.expiry }}</span>
            </div>
            <div class="item">
              <p class="title">出生日期</p>
              <span>{{ baseInfo.birthday }}</span>
            </div>
            <div class="item">
              <p class="title">手机号码</p>
              <span>{{ baseInfo.phone }}</span>
            </div>
            <div class="item">
              <p class="title">固定电话</p>
              <span>{{ baseInfo.telephone }}</span>
            </div>
            <div class="item">
              <p class="title">经常居住地或工作单位地址</p>
              <span>{{ baseInfo.address }}</span>
            </div>
          </div>
        </div>
        <div class="border-bottom mar-top-12">
          <div class="title border-line">受益所有权信息</div>
          <div class="content mar-top-12" style="background: #fff; padding-left: 12px">
            <div class="item" style="width: 25%">
              <p class="title">实际控制公司、合伙企业</p>
              <span>其他形式</span>
            </div>
            <div class="item" style="width: 25%">
              <p class="title">其他形式</p>
              <span>其他形式</span>
            </div>
            <div class="item" style="width: 25%">
              <p class="title">受益所有权形成日期(实施实际控制)</p>
              <span>2025-08-08</span>
            </div>
            <div class="item" style="width: 25%">
              <p class="title">受益所有权终止日期(实施实际控制)</p>
              <span>2025-08-08</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div class="text-right mar-top-12">
      <el-button size="small" @click="goBack">关 闭 </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BackupsDetail',

  data() {
    return {
      showEyes: '',
      view: false,
      baseInfo: {
        name: '张**',
        sex: '女',
        national: '中国',
        idType: ' ******** ',
        idCode: ' ******** ',
        expiry: '********',
        birthday: '********',
        phone: '139********',
        telephone: '-',
        address: '********',
      },
    }
  },
  created() {
    this.showEyes = this.$route.query?.checked

  },
  mounted() {},

  methods: {
    goBack() {
      this.$router.go(-1)
    },
    viewText() {
      this.view = !this.view
      if (this.view) {
        this.baseInfo = {
          name: '张lili',
          sex: '女',
          national: '中国',
          idType: '身份证',
          idCode: ' 310226199203024512 ',
          expiry: '2050-01-01',
          birthday: '2000-01-01',
          phone: '13999999999',
          telephone: '-',
          address: '北京市辖县延庆县张山营镇朝晖路39号',
        }
      } else {
        this.baseInfo = {
          name: '张**',
          sex: '女',
          national: '中国香港',
          idType: ' ******** ',
          idCode: ' ******** ',
          expiry: '********',
          birthday: '********',
          phone: '139********',
          telephone: '-',
          address: '********',
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.content {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  color: #666;
  padding-bottom: 12px;
  .item {
    width: 33%;
    p {
      margin-bottom: 6px;
    }
  }
}


</style>